<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spring AI 函数调用演示</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .function-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .function-card {
            border: 2px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            background: #fafafa;
        }
        .function-card h3 {
            color: #4CAF50;
            margin-top: 0;
        }
        .input-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            box-sizing: border-box;
        }
        textarea {
            height: 80px;
            resize: vertical;
        }
        button {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }
        .btn-primary {
            background-color: #4CAF50;
            color: white;
        }
        .btn-primary:hover {
            background-color: #45a049;
        }
        .btn-secondary {
            background-color: #2196F3;
            color: white;
        }
        .btn-secondary:hover {
            background-color: #1976D2;
        }
        .response-area {
            border: 2px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            min-height: 200px;
            background-color: #fafafa;
            white-space: pre-wrap;
            font-family: 'Courier New', monospace;
            line-height: 1.6;
            margin-top: 20px;
        }
        .status {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
        }
        .status.loading {
            background-color: #fff3cd;
            color: #856404;
        }
        .status.success {
            background-color: #d4edda;
            color: #155724;
        }
        .status.error {
            background-color: #f8d7da;
            color: #721c24;
        }
        .examples {
            background: #e8f5e8;
            padding: 15px;
            border-radius: 5px;
            margin-top: 10px;
        }
        .examples h4 {
            margin-top: 0;
            color: #2e7d32;
        }
        .example-item {
            background: white;
            padding: 8px;
            margin: 5px 0;
            border-radius: 3px;
            cursor: pointer;
            border: 1px solid #c8e6c9;
        }
        .example-item:hover {
            background: #f1f8e9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🤖 Spring AI 函数调用演示</h1>
        
        <div class="function-grid">
            <!-- 天气查询 -->
            <div class="function-card">
                <h3>🌤️ 天气查询</h3>
                <div class="input-group">
                    <label for="weatherMsg">问题：</label>
                    <input type="text" id="weatherMsg" value="北京今天天气怎么样？">
                </div>
                <button class="btn-primary" onclick="callFunction('weather', 'weatherMsg')">查询天气</button>
                <div class="examples">
                    <h4>示例问题：</h4>
                    <div class="example-item" onclick="setInput('weatherMsg', '上海今天天气如何？')">上海今天天气如何？</div>
                    <div class="example-item" onclick="setInput('weatherMsg', '深圳的天气情况怎么样？')">深圳的天气情况怎么样？</div>
                    <div class="example-item" onclick="setInput('weatherMsg', '广州现在是什么天气？')">广州现在是什么天气？</div>
                </div>
            </div>

            <!-- 数学计算 -->
            <div class="function-card">
                <h3>🧮 数学计算</h3>
                <div class="input-group">
                    <label for="calcMsg">问题：</label>
                    <input type="text" id="calcMsg" value="计算 15 + 25 等于多少？">
                </div>
                <button class="btn-primary" onclick="callFunction('calculator', 'calcMsg')">进行计算</button>
                <div class="examples">
                    <h4>示例问题：</h4>
                    <div class="example-item" onclick="setInput('calcMsg', '计算 123 乘以 456')">计算 123 乘以 456</div>
                    <div class="example-item" onclick="setInput('calcMsg', '100 除以 7 等于多少？')">100 除以 7 等于多少？</div>
                    <div class="example-item" onclick="setInput('calcMsg', '2 的 10 次方是多少？')">2 的 10 次方是多少？</div>
                </div>
            </div>

            <!-- 时间查询 -->
            <div class="function-card">
                <h3>⏰ 时间查询</h3>
                <div class="input-group">
                    <label for="timeMsg">问题：</label>
                    <input type="text" id="timeMsg" value="现在几点了？">
                </div>
                <button class="btn-primary" onclick="callFunction('time', 'timeMsg')">查询时间</button>
                <div class="examples">
                    <h4>示例问题：</h4>
                    <div class="example-item" onclick="setInput('timeMsg', '纽约现在几点？')">纽约现在几点？</div>
                    <div class="example-item" onclick="setInput('timeMsg', '伦敦的当前时间是？')">伦敦的当前时间是？</div>
                    <div class="example-item" onclick="setInput('timeMsg', '东京现在是什么时间？')">东京现在是什么时间？</div>
                </div>
            </div>

            <!-- 多函数调用 -->
            <div class="function-card">
                <h3>🔗 多函数调用</h3>
                <div class="input-group">
                    <label for="multiMsg">问题：</label>
                    <textarea id="multiMsg">查询北京天气，然后计算当前时间加上3小时是几点</textarea>
                </div>
                <button class="btn-secondary" onclick="callFunction('multi', 'multiMsg')">多功能查询</button>
                <div class="examples">
                    <h4>示例问题：</h4>
                    <div class="example-item" onclick="setInput('multiMsg', '查询上海天气，并计算25乘以4')">查询上海天气，并计算25乘以4</div>
                    <div class="example-item" onclick="setInput('multiMsg', '告诉我深圳天气，现在时间，以及100除以3的结果')">告诉我深圳天气，现在时间，以及100除以3的结果</div>
                </div>
            </div>
        </div>

        <!-- 流式调用 -->
        <div class="function-card">
            <h3>🌊 流式函数调用</h3>
            <div class="input-group">
                <label for="streamMsg">问题：</label>
                <input type="text" id="streamMsg" value="请查询上海的天气情况，并计算一下25乘以4等于多少">
            </div>
            <button class="btn-secondary" onclick="callStreamFunction()">流式查询</button>
        </div>

        <!-- 响应区域 -->
        <div id="response" class="response-area">点击上方按钮开始测试函数调用功能...</div>
        <div id="status" class="status" style="display: none;"></div>

        <!-- 操作按钮 -->
        <div style="text-align: center; margin-top: 20px;">
            <button class="btn-secondary" onclick="getFunctions()" style="width: auto; margin: 0 10px;">查看可用函数</button>
            <button class="btn-secondary" onclick="getHelp()" style="width: auto; margin: 0 10px;">获取帮助</button>
            <button class="btn-primary" onclick="clearResponse()" style="width: auto; margin: 0 10px;">清空结果</button>
        </div>
    </div>

    <script>
        const responseDiv = document.getElementById('response');
        const statusDiv = document.getElementById('status');

        function showStatus(message, type) {
            statusDiv.textContent = message;
            statusDiv.className = `status ${type}`;
            statusDiv.style.display = 'block';
        }

        function hideStatus() {
            statusDiv.style.display = 'none';
        }

        function setInput(inputId, value) {
            document.getElementById(inputId).value = value;
        }

        function callFunction(functionName, inputId) {
            const message = document.getElementById(inputId).value.trim();
            if (!message) {
                alert('请输入问题！');
                return;
            }

            responseDiv.textContent = '正在调用函数...';
            showStatus(`正在调用 ${functionName} 函数...`, 'loading');

            fetch(`/function/${functionName}?msg=${encodeURIComponent(message)}`)
                .then(response => response.text())
                .then(data => {
                    responseDiv.textContent = data;
                    showStatus('函数调用完成', 'success');
                    setTimeout(hideStatus, 3000);
                })
                .catch(error => {
                    responseDiv.textContent = '函数调用失败: ' + error.message;
                    showStatus('函数调用失败', 'error');
                });
        }

        function callStreamFunction() {
            const message = document.getElementById('streamMsg').value.trim();
            if (!message) {
                alert('请输入问题！');
                return;
            }

            responseDiv.textContent = '';
            showStatus('建立流式连接中...', 'loading');

            const eventSource = new EventSource(`/function/stream?msg=${encodeURIComponent(message)}`);
            
            eventSource.onopen = function() {
                showStatus('流式连接已建立，正在接收数据...', 'success');
            };

            eventSource.onmessage = function(event) {
                responseDiv.textContent += event.data;
                responseDiv.scrollTop = responseDiv.scrollHeight;
            };

            eventSource.onerror = function(event) {
                console.error('EventSource failed:', event);
                showStatus('流式连接完成', 'success');
                eventSource.close();
                setTimeout(hideStatus, 3000);
            };

            setTimeout(() => {
                if (eventSource.readyState !== EventSource.CLOSED) {
                    eventSource.close();
                    showStatus('流式连接已关闭', 'success');
                    setTimeout(hideStatus, 3000);
                }
            }, 60000);
        }

        function getFunctions() {
            showStatus('获取函数列表中...', 'loading');
            fetch('/function/functions')
                .then(response => response.json())
                .then(data => {
                    responseDiv.textContent = JSON.stringify(data, null, 2);
                    showStatus('函数列表获取完成', 'success');
                    setTimeout(hideStatus, 3000);
                })
                .catch(error => {
                    responseDiv.textContent = '获取函数列表失败: ' + error.message;
                    showStatus('获取失败', 'error');
                });
        }

        function getHelp() {
            showStatus('获取帮助信息中...', 'loading');
            fetch('/function/help')
                .then(response => response.json())
                .then(data => {
                    responseDiv.textContent = JSON.stringify(data, null, 2);
                    showStatus('帮助信息获取完成', 'success');
                    setTimeout(hideStatus, 3000);
                })
                .catch(error => {
                    responseDiv.textContent = '获取帮助信息失败: ' + error.message;
                    showStatus('获取失败', 'error');
                });
        }

        function clearResponse() {
            responseDiv.textContent = '点击上方按钮开始测试函数调用功能...';
            hideStatus();
        }
    </script>
</body>
</html>